<template>
  <div class="contentBox">
    <van-sticky>
      <van-search
        v-model="value"
        placeholder="搜索歌曲、歌手、专辑"
        shape="round"
        background="#d43c33"
        @keyup="inputChange"
      />
    </van-sticky>
    <div class="hotSecrahBox" v-if="/^[\s]*$/.test(value)">
      <p style="font-size: 14px; color: #666; margin-bottom: 20px">热门搜索</p>
      <div class="seListbox">
        <div class="list" v-for="item in list" :key="item">{{ item }}</div>
      </div>
    </div>
    <div v-if="value !== ''">
      <div class="MnawsongBox" v-for="(item, index) in searchList" :key="index">
        <div class="MnawsongBoxlist">
          <div>
            {{ item.name }}<span>{{ item.album.name }}</span>
          </div>
          <div>
            <i class="u-hmsprt sghot"></i>
            {{ item.artists[0].name }}-{{ item.name }}
          </div>
        </div>
        <div class="iconsong"></div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Search, Sticky } from "vant";
export default {
  components: {
    [Search.name]: Search,
    [Sticky.name]: Sticky,
  },
  data() {
    return {
      value: "",
      list: [
        "不舍",
        "速度与激情",
        "青春的模样",
        "野孩子",
        "大城小爱",
        "不要忘记我爱你",
        "kiss me baby",
        "Beautiful",
        "防弹少年团",
        "张杰",
      ],
      searchList: [],
    };
  },
  methods: {
    // 搜索防抖节流
    debounce(func, wait) {
      if (this.timeout) clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        func();
      }, wait);
    },
    // input 实时输入
    inputChange(v) {
      this.debounce(this.search, 100);
    },
    search() {
      if (!/^[\s]*$/.test(this.value)) {
        axios({
          url: "https://autumnfish.cn/search?",
          method: "get",
          params: {
            keywords: this.value,
            limit: 10,
            type: 1,
          },
        })
          .then((res) => {
            if (res.data.result.songs) {
              this.searchList = res.data.result.songs;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.hotSecrahBox {
  padding: 15px 18px 15px 18px;
}
.seListbox {
  display: flex;
  /* margin-left: 10px; */
  flex-wrap: wrap;
  align-items: center;
}
.list {
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  padding: 5px 10px 5px 10px;
  color: #333;
  border: 1px solid #d3d4da;
  border-radius: 20px;
  text-align: center;
}
.MnawsongBox {
  width: 100%;
  padding-left: 14px;
  position: relative;
}
.MnawsongBoxlist {
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid #efeff0;
}
.MnawsongBoxlist div:first-child {
  width: 80%;
  font-size: 17px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.MnawsongBoxlist div:first-child span {
  color: #888;
  margin-left: 4px;
  font-size: 16px;
}
.MnawsongBoxlist div:last-child {
  color: #888;
  font-size: 12px;
  margin-top: 3px;
}
.sghot {
  display: inline-block;
  width: 12px;
  height: 8px;
  margin-right: 4px;
  background: url(../assets/image/index_icon_2x.png) no-repeat;
  background-size: 166px 97px;
}
.iconsong {
  width: 24px;
  height: 24px;
  background: url(../assets/image/index_icon_2x.png) no-repeat;
  background-position: -24px 0;
  background-size: 166px 97px;
  position: absolute;
  top: 20px;
  right: 30px;
}
</style>